<template>
	<div v-my-directive :data-title="article.title" :data-description="article.description" :data-keywords="article.keywords" class="main">
		<div>
			<div class="content">
				<!-- 路徑用PHP模板生成 -->
				<div class="left coresnav">
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
						<el-breadcrumb-item v-for="(item, index) in comn" :key="index" :to="{ path: '/column/' + item.alias + '.html' }">{{ item.name }}</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<!-- 文章主體 -->

				<div class="ThinLineLayout">
					<!-- 视频 -->
					<div v-if="article" class="Genericpadding content">
						<div class="bold">{{ article.title }}</div>
						<div class="articlebt minfont grey">
							<div class="NavigationRight">
								<div v-if="article.user.nickname">{{ $t('message.author') + ': ' + article.user.nickname }}</div>
								<div v-else>{{ $t('message.author') + ': ' + article.user.username }}</div>
								<div class="left">{{ $t('message.Classification') + ': ' + article.pidname }}</div>
								<div class="left">{{ $t('message.releasetime') }}: {{ article.Creationtime }}</div>
							</div>
							<div class="NavigationRight">
								<div>{{ $t('message.collect') }}:{{ collect }}</div>
								<div>{{ $t('message.like') }}：{{ Like }}</div>
								<div>{{ $t('message.View') }}{{ article.PageView }}</div>
							</div>
						</div>
					</div>
					<!-- 摘要 -->
					<!-- 内容 -->
					<!-- 底部 -->
					<div class="Genericpadding interval">
						<div class="abstract">
							<div>
								<div class="iconfont icon-gaojian-zhaiyao Green">摘要：</div>
								<p>{{ article.description }}</p>
							</div>
						</div>

						<div class="pre TopRectangles" :class="{ PurchaseStyle: purchase }">
							<readOnly :contentid="contentid" post="getarticlepage"></readOnly>
							<el-skeleton v-if="!article" :rows="5" animated />
							<div v-if="purchase" class="Positioningmask">
								<el-button type="danger" @click="purchase = !purchase">剩下内容需购买</el-button>
							</div>
						</div>
						<div class="left center NavigationRight">
							<div class="elliptic" @click="Favoritelikes(2)">
								<div class="center NavigationRight">
									<div class="iconfont centerend" :class="usercollect ? 'icon-shoucang3' : 'icon-shoucang'"></div>
									<div v-if="usercollect" class="center minfont">已收藏</div>
									<div v-else class="center minfont">{{ $t('message.collect') }}</div>
									<div class="center minfont">{{ collect }}</div>
								</div>
							</div>
							<div class="grantareward">
								<p class="center">赏</p>
							</div>
							<div class="elliptic" @click="Favoritelikes(1)">
								<div class="center NavigationRight">
									<div class="iconfont centerend" :class="userlike ? 'icon-shoucang1' : 'icon-shoucang2'"></div>
									<div v-if="userlike" class="center minfont">已点赞</div>
									<div v-else class="center minfont">{{ $t('message.like') }}</div>
									<div class="center minfont">{{ Like }}</div>
								</div>
							</div>
						</div>
						<div class="left">
							<div class="abstract">
								<div>
									<p>版權</p>
									<p>版权： 转载请注明出处:{{ domain }}</p>
								</div>
							</div>
						</div>
					</div>
					<!-- 分享 -->
					<div class="Genericpadding grey">
						<div class="share">
							<div>分享:</div>
							<a class="center" :href="'https://t.me/share/url?text=' + article.title + '&url=' + domain" target="_blank" rel="noopener noreferrer"><div class="iconfont icon-telegram maxminfont center"></div></a>
						</div>
					</div>
				</div>
				<!-- 上 和下 -->
				<div class="left Horizontalspacing interval">
					<div class="Genericpadding Intervalvertical">
						<a v-if="previous" :href="'/article/' + previous.alias + '/' + previous.id">上一篇</a>
						<div v-else>上一篇</div>
						<a v-if="previous" :href="'/article/' + previous.alias + '/' + previous.id">{{ previous.title }}</a>
						<div v-else>没有了</div>
					</div>
					<div class="Genericpadding">
						<a v-if="next" :href="'/article/' + next.alias + '/' + next.id">下一篇</a>
						<div v-else>下一篇</div>
						<a v-if="next" :href="'/article/' + next.alias + '/' + next.id">{{ next.title }}</a>
						<div v-else>没有了</div>
					</div>
				</div>
				<div class="left ThinLineLayout">
					<div class="Genericpadding">最新发布</div>
					<a class="newlist" v-for="(item, index) in newlist" :key="index" :href="'/article/' + item.alias + '/' + item.id"
						><div style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 620px" class="turngreen">{{ item.title }}</div> <p class="grey">{{ item.Creationtime }}</p></a
					>
					<el-skeleton v-if="!newlist" v-for="index in 10" :key="index" class="newlist" animated>
						<template #template>
							<el-skeleton-item variant="h3" style="width: 100%" />
						</template>
					</el-skeleton>
				</div>
				<div class="ThinLineLayout">
					<div class="Genericpadding">
						<div class="articlebt">
							<div>发表评论</div>
							<div class="minfont grey">{{ Replylist.length }}条评论</div>
						</div>
					</div>
					<div id="Clicktoreply" v-if="user" class="Genericpadding Horizontalspacingg interval">
						<el-avatar class="pimg" :src="user.Avatar" :size="60">
							<div class="image-slot iconfont icon-setting-role"></div>
						</el-avatar>

						<div class="Intervalvertical TopRectangles">
							<div>
								<dexedi class="dexediwh" height="60px" ref="child"></dexedi>
							</div>
							<div class="buttons" @click="processReply">提交</div>
							<div v-if="CommentID" class="comentabot">回复:{{ CommentIDname }}</div>
						</div>
					</div>
					<div v-if="Replylist[0]" class="Genericpadding Intervalvertical">
						<!-- 评论 -->
						<div v-for="(item, index) in Replylist" :key="index" :id="'Reply' + item.id" class="Intervalvertical">
							<div class="articlebt minfont">
								<div class="Horizontalspacing minxgap">
									<el-avatar class="pimgmin" :src="item.username.Avatar" :size="60">
										<div class="image-slot iconfont icon-setting-role"></div>
									</el-avatar>
									<router-link v-if="item.username.nickname" class="center turngreen" :to="'/homepage/' + item.userid">{{ item.username.nickname }}</router-link>
									<router-link v-else class="center turngreen" :to="'/homepage/' + item.userid">{{ item.username.username }}</router-link>
								</div>
								<div class="Horizontalspacing minxgap grey">
									<p>{{ item.Creationtime }}</p>
									<div @click=";(CommentID = item.id), (CommentIDname = item.username.nickname ? item.username.nickname : item.username.username), Clicktoreply()">回复</div>
								</div>
							</div>
							<div class="abstracts pmaring">
								<Reply :content="item.content"> </Reply>
							</div>
							<!-- 回复列表 -->
							<ul v-if="item.child" class="pmaring Intervalvertical">
								<div v-for="(item, index) in item.child" :key="index" :id="'Reply' + item.id" class="Intervalvertical">
									<div class="articlebt minfont">
										<div class="Horizontalspacing minxgap grey">
											<el-avatar class="pimgmins" :src="item.username.Avatar" :size="60">
												<div class="image-slot iconfont icon-setting-role"></div>
											</el-avatar>
											<router-link v-if="item.username.nickname" class="center turngreen" :to="'/homepage/' + item.userid">{{ item.username.nickname }}</router-link>
											<router-link v-else class="center turngreen" :to="'/homepage/' + item.userid">{{ item.superiorname.username }}</router-link>
											<div class="iconfont icon-dian minifont center"></div>
											<p v-if="item.superiorname.nickname" class="center turngreen Green" @click="jump('Reply' + item.CommentID)">@{{ item.superiorname.nickname }}</p>
											<p v-else class="center turngreen Green" @click="jump('Reply' + item.CommentID)">@{{ item.superiorname.username }}</p>
										</div>
										<div class="Horizontalspacing minxgap grey">
											<p class="left center">{{ item.Creationtime }}</p>
											<div @click=";(CommentID = item.id), (CommentIDname = item.username.nickname ? item.username.nickname : item.username.username), Clicktoreply()">回复</div>
										</div>
									</div>
									<div class="abstracts pmaring">
										<Reply :content="item.content"> </Reply>
									</div>
								</div>

								<!-- 这里插入 收起回复  隐藏当前 显示更多 -->
							</ul>
						</div>
					</div>
					<div v-if="!Replylist[0]" class="Genericpadding">
						<div class="abstracts">
							<p class="center">还没有评论呢，快来抢沙发~</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="left"> <left v-if="article.userid" :userid="article.userid"></left> </div>
	</div>
</template>
<script>
	import { mapState } from 'vuex'
	import { ref } from 'vue'
	import left from './../components/left'
	import dexedi from './../components/dexedi'

	import readOnly from './../components/readOnly'
	import Reply from './../components/Reply'
	import { dataRequest as api, setText } from '@/api/api'

	import 'highlight.js/styles/androidstudio.css'
	export default {
		name: 'name',
		computed: {
			...mapState(['logon', 'user']),
		},
		components: {
			// 组件
			left,
			readOnly,
			dexedi,
			Reply,
		},
		data() {
			return {
				contentid: this.$route.params.articid.replace(/.html/g, ''),
				loading: false,
				article: '',
				// 当前域名
				domain: window.location.href,
				comn: [],
				PurchaseStyle: 'PurchaseStyle',
				purchase: false,
				articlelist: [],
				newlist: [],
				// 点赞数量
				Like: 0,
				userlike: false,
				// 收藏数量
				collect: 0,
				usercollect: false,
				CommentID: '',
				Replylist: [],
				page: '',
				CommentIDname: '',
				// 上一篇
				previous: '',
				// 下一篇
				next: '',
			}
		},
		methods: {
			// 发送回复
			async processReply() {
				let value = this.$refs.child.delta()
				let delta = value[0]
				if (setText(value[1])) {
					// 内容存在
					console.log(delta.ops)
					let arr = { PostID: this.article.id, userid: this.user.id, CommentID: this.CommentID, content: delta.ops }
					arr = await api(['PostReply', arr])
					console.log(arr)
					if (arr.code == 200) {
						this.getprocessReply()
						this.$message.success('回复成功')
					}
				} else {
					// 回复内容不得为空
					this.$message.error('回复内容不得为空')
				}
				this.CommentID = ''
			},
			// 测试 回复列表
			async getprocessReply() {
				let arr = await api(['getPostReply', { PostID: this.article.id }])
				if (arr.code == 200) {
					this.Replylist = arr.data
					console.log(this.Replylist)
				}
			},
			// 接收数据富文本
			async Receive_data(value) {
				this.article = value

				this.article.Price = Math.round(this.article.Price * 1000) / 1000
				// 点赞数量
				this.Like = this.article.Like.length
				// 收藏数量
				this.collect = this.article.collect.length
				if (this.article.Price > 0) {
					this.purchase = true
				}
				let arr = await api(['acbrowsing', [this.$route.params.articid.replace(/.html/g, '')]])
				if (this.user) {
					this.getFavoritelikes()
				}
			},
			// 遍历HTML标签 多余的删除
			// 函数
			async get() {
				let arr = await api(['Obtainclassification', this.$route.params.comn])
				if (arr.code == 200) {
					this.comn = arr.data
				}
				let alice = this.$route.params.comn
				// 这个 就要知道当前文章在第几页
				let array = await api(['getarticlepage', { alias: alice }])

				if (array.code == 200) {
					this.newlist = array.data
					this.getprocessReply()
				}
				// 获取前一篇文章
				array = await api(['getarticlepage', { id: this.contentid, perPage: 1, previous: 'yes' }])
				if (array.code == 200) {
					this.previous = array.data[0]
				}
				array = await api(['getarticlepage', { id: this.contentid, perPage: 1, next: 'yes' }])
				if (array.code == 200) {
					this.next = array.data[0]
				}
			},
			// 收藏點贊 这个必须单独
			async Favoritelikes(ele) {
				if (this.user) {
					let arr = await api(['LikeCollection', { type: ele, PostID: this.article.id, userid: this.user.id }])
					console.log(arr)
					if (ele == 1) {
						this.userlike = !this.userlike
						this.Like = this.userlike ? this.Like / 1 + 1 : this.Like / 1 - 1
					} else {
						this.usercollect = !this.usercollect
						this.collect = this.usercollect ? this.collect / 1 + 1 : this.collect / 1 - 1
					}
				} else {
					// 没有登录
					this.$message.error('请先登录')
				}
			},
			// 获取点赞
			async getFavoritelikes() {
				// 本身就应该获取
				// 这里判断登录
				this.article.Like.forEach(element => {
					if (element.userid == this.user.id) {
						this.userlike = true
					}
				})
				this.article.collect.forEach(element => {
					if (element.userid == this.user.id) {
						this.usercollect = true
					}
				})
			},
			// 点击回复
			Clicktoreply() {
				const element = document.getElementById('Clicktoreply')
				const distanceToTop = element.offsetTop
				window.scrollTo({ behavior: 'smooth', top: distanceToTop })
				// Clicktoreply
			},
			// 回复楼层跳转
			jump(ele) {
				console.log(ele)
				const element = document.getElementById(ele)
				const rect = element.getBoundingClientRect()
				const topDistance = rect.top + window.pageYOffset - 5
				window.scrollTo({
					top: topDistance,
					behavior: 'smooth', // 使用平滑滚动效果
				})
				console.log(topDistance)
			},
		},
		mounted() {
			// 生命周期:
			this.get(), window.scrollTo({ behavior: 'instant', top: 0 })
		},
		updated() {
			this.loading = false
		},
	}
</script>
<style scoped>
	/* .Genericpadding {
		width: 100%;
	} */
	.dexediwh {
		width: 100%;
	}
	.pre,
	.pre pre,
	.pre span {
		cursor: default;
		-moz-user-select: text;
		-webkit-user-select: text;
		-ms-user-select: text;
		-khtml-user-select: text;
		user-select: text;
		font-size: 13px;
		overflow: hidden;
		/* 直接隐藏元素超出的部分 */
	}
	.PurchaseStyle {
		height: 200px;
		overflow: hidden;
	}
	.Positioningmask {
		width: 100%;
		height: 200px;
		position: absolute;
		top: 0px;
		background: linear-gradient(to bottom, #ffffff8b, #000000);
	}
	.Positioningmask :deep(.el-button) {
		width: 300px;
		height: 40px;
		font-size: 20px;
		font-weight: bold;
		position: absolute;
		right: 0;
		left: 0;
		margin: auto;
		bottom: 35px;
	}

	.newlist {
		display: flex;
		flex-direction: row;
		place-content: space-between;
		gap: 20px;
		width: 100%;
		padding: 10px 20px;
		background: #fff;
	}
	.comentabot {
		position: absolute;
		top: 5px;
		right: 10px;
	}
	.pimg .image-slot {
		font-size: 20px;
	}
	.pimgmin .image-slot {
		font-size: 12px;
	}
	.pimgmins .image-slot {
		font-size: 8px;
	}
	.coresnav span {
		font-size: 12px;
		color: #606266 !important;
	}
</style>
<style>
	.coresnav .el-breadcrumb__inner {
		color: inherit;
		font-weight: inherit;
	}
</style>
<style scoped>
	@media screen and (max-width: 860px) {
		.abstract {
			display: flex;
		}
		.content {
			width: 100vw;
		}
		.dexediwh {
			width: 100%;
		}
	}
</style>
<!-- 验证逻辑  发送ID -->
<!-- 收藏  ID  帖子ID  用户ID  -->
<!-- 点赞 ID 帖子ID  用户ID  -->

<!--  获取时  -->
<!-- 评论 ID 帖子ID  用户ID  回复的哪个评论ID   内容 -->
